<template>
    <view>

        <view class="toptest">
          <u-sticky v-if="type == 0">
            <view class="navtop">
              <view class="status_bar">
                <!-- 这里是状态栏 -->
              </view>
              <view class="navtitle"> 测试 </view>
            </view>
          </u-sticky>
            <view class="search">
                	<view class="left" @click="testsearch">
                        <u-search placeholder="感情测试" disabled :showAction='false' bgColor='#fff' v-model="keyword"></u-search>
                    </view>
                    <view class="right" @click="myTest">
                        <image src="../../static/userSide/xin.png" mode=""></image>
                        <view>
                            我的测评
                        </view>
                    </view>
            </view>
            <view class="everyday">
                <view class="title">
                    每日推荐
                    <view>

                    </view>
                </view>
                <scroll-view scroll-x="true" style="width: 92vw;">
                     <view class="everydaytest">
                        <view class="everydaytestbox" v-for="(item,index) in everydaytest" :key="index" @click="testd(item.id)">
                            <image :src="item.url" mode="aspectFill"></image>
                            <view class="titlesbox">
                                <view class="titles">
                                     {{item.title}}
                                </view>
                                <view class="bott">
                                    <view class="left">
                                        ￥{{item.price}}
                                    </view>
                                    <view class="right">
                                        {{item.personNum}}人测过
                                    </view>
                                </view>
                            </view>
                        </view>

                    </view>
                </scroll-view>
            </view>
        </view>
        <view class="typetest">
            <scroll-view scroll-x="true" style="width: 92vw;">
                <view class="navtest">
                    <view class="text" :class="typet==index?'typet':''" v-for="(i,index) in typetest" :key="index" @click="typetestff(index,i.dictValue)">
                        {{i.dictLabel}}
                        <view class="bor" v-if="typet==index">

                        </view>
                    </view>

                </view>
            </scroll-view>
            <view class="typetestcon">
                <scroll-view scroll-y="true" style="height: 1000rpx;" lower-threshold="100" :scroll-top="scrollTop"	@scrolltolower="aaaa" >
                    <view class="typetestconbox" v-for="(item,index) in typetestcon" :key="index"  @click="testd(item.id)">
                        <image :src="item.url" mode="aspectFill"></image>
                        <view class="right">
                            <view class="titlet">
                                {{item.title}}
                            </view>
                            <view class="text">
                                {{item.info}}
                            </view>
                            <view class="bott">
                                <view class="bleft">
                                    <text class="t1">￥{{item.newPrice}}</text>
                                    <text class="t2">￥{{item.price}}</text>
                                </view>
                                <view class="bright">
                                    {{item.personNum}}人 <text>测过</text>
                                </view>
                            </view>
                        </view>
                    </view>

                </scroll-view>
            </view>

			<view class="" v-show="isOver">
				<u-loadmore :status="status" />
			</view>
        </view>
       <view class="" style="height: 50rpx;">

       </view>
    </view>
</template>

<script>
import {
  testList, dictApi
} from '../../api/api.js'

export default {
  data() {
    return {
      type: 0,
      keyword: '',
      everydaytest: [],
      typet: 0,
      typetest: [],
      typetestcon: [],
      pageNum: 1,
      pageSize: 10,
      isOver: false, //用来显示显隐提示语 isOver 默认值false
      status: 'loading',
      show: false,
      total: 0,

      scrollTop: 0,

      doneLoading: false,
    };
  },
  onLoad(option) {
    if (option.type) {
      this.type = option.type
    }
  },
  //下拉到底部后加载新数据
  onReachBottom() {
    this.isOver = true;
    this.pageNum++; //页数加一
    this.getList(); //回调接口
  },
  created() {
    this.getTitle()
    this.getRemList()
    this.getList()
  },

  methods: {
    aaaa() {
      console.log('doneLoading', this.doneLoading)
      if (this.doneLoading) {
        return
      }
      this.doneLoading = true
      this.isOver = true;
      this.pageNum++; //页数加一
      this.getList(); //回调接口
    },
    testsearch() {
      uni.navigateTo({
        url: '/subPackages/pages/home/testsearch'
      })
    },
    myTest() {
      uni.navigateTo({
        url: '/pages/myorder/myorder'
      })
    },
    getTitle() {
      const data = {
        dictType: 'test_type'
      }

      dictApi(data).then(res => {
        this.typetest = res.rows
      })
    },
    getRemList() {
      const data = {
        isRecommend: 1,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }
      testList(data).then(res => {
        this.everydaytest = res.rows
      })

    },
    getList() {
      const data = {
        type: this.typet + '',
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }
      testList(data).then(res => {
        this.total = res.total
        if (this.typetestcon.length === this.total) {
          this.status = 'nomore'
          return
        }

        this.typetestcon = [...this.typetestcon, ...res.rows]
        this.doneLoading = false
      })

    },
    typetestff(index, type) {
      this.typet = index
      const data = {
        type: type,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }
      testList(data).then(res => {
        this.typetestcon = res.rows
        this.doneLoading = false
        this.scrollTop = this.scrollTop === 0 ? 1 : 0
      })
    },
    testd(id) {
      uni.navigateTo({
        url: '/pages/userSide/testDetails?id=' + id
      })
    }
  }
}
</script>

<style lang="scss">
.toptest{
    background-image: linear-gradient(#4899D9,#9EC6E6,#F6F6F6);
    .search{
        display: flex;
        padding: 20rpx 4vw;
        align-items: center;
        .left{
            width: 580rpx;
            margin-right: 15rpx;
        }
        .right{
            width: 90rpx;
            text-align: center;
            color: #fff;
            font-size: 18rpx;
            image{
                width: 40rpx;
                height: 38rpx;
                margin-bottom: 10rpx;
            }
        }
    }
  .navtop {
    overflow: hidden;

    .status_bar {
      height: var(--status-bar-height);
      width: 98%;
    }

    .navtitle {
      text-align: center;
      font-size: 32rpx;
      color: #000000;
      padding: 20rpx 0;
    }
  }
    .everyday{
        width: 92vw;
        margin: 10rpx auto;
        .title{
            margin: 30rpx 0;
            color: #fff;
            font-weight: bold;
            font-size: 32rpx;
            position: relative;
            z-index: 2;
            view{
                position: absolute;
                left: 0;
                bottom: -5rpx;
                height: 12rpx;
                background-color: #1989E1;
                border-radius: 50rpx;
                width:130rpx;
                z-index: -3;

            }
        }
        .everydaytest{
            display:inline-flex;
            .everydaytestbox{
                 margin-right: 17rpx;
                width: 320rpx;
                overflow: hidden;
                border-radius: 20rpx;
                background-color: #fff;
                image{
                   width: 320rpx;
                   height: 180rpx;
                }
                .titlesbox{
                    padding: 15rpx;
                    .titles{
                        margin: 10rpx 0 20rpx;
                        line-height: 30rpx;
                        font-size: 30rpx;
                        color: #333;
                        text-overflow: ellipsis;
                        overflow: hidden;
                        white-space: nowrap;
                    }
                    .bott{
                        display: flex;
                        justify-content: space-between;
                        .left{
                           color:  #FF1A00;
                           font-weight: bold;
                           font-size: 28rpx;
                           text-overflow: ellipsis;
                           overflow: hidden;
                           white-space: nowrap;
                           width: 45%;
                        }
                        .right{
                            font-size: 24rpx;
                            color: #999;
                            text-overflow: ellipsis;
                            overflow: hidden;
                            white-space: nowrap;
                            width: 55%;
                        }
                    }

                }
            }
        }
    }
}
.typetest{
    width: 92vw;
    margin:50rpx auto;
    .navtest{
        display: inline-flex;
        align-items: center;
        .text{
            color: #999;
           font-size: 28rpx;
           margin-right: 70rpx;
           position: relative;
           .bor{
               width: 100%;
               height: 12rpx;
               background-color: #1989E1;
               border-radius: 50rpx;
               position:absolute;
               left: 0;
               bottom: 0;
               z-index: -3;
           }
        }
        .typet{
            font-size: 30rpx;
            color: #333;
        }
    }
    .typetestcon{
        margin: 40rpx 0 0;
        padding: 20rpx 0;
        .typetestconbox{
            padding:30rpx;
            display: flex;
            background-color: #fff;
            image{
                width: 150rpx;
                height: 150rpx;
                margin-right: 40rpx;
            }
            .right{
                width: 450rpx;
                .titlet{
                    color: #333;
                    font-size: 32rpx;

                    text-overflow: ellipsis;
                                overflow: hidden;
                                white-space: nowrap;
                }
                .text{
                    font-size: 24rpx;
                    color: #999;
                    margin: 20rpx 0 25rpx;

                    text-overflow: ellipsis;
                                overflow: hidden;
                                white-space: nowrap;
                }
                .bott{
                    display: flex;
                    justify-content: space-between;
                    .bleft{
                        width: 50%;

                        text-overflow: ellipsis;
                                    overflow: hidden;
                                    white-space: nowrap;
                        .t1{
                           font-size: 32rpx;
                            color:#FF1A00 ;
                            margin-right: 15rpx;
                        }
                        .t2{
                            color: #999;
                            font-size: 24rpx;
                            text-decoration: line-through;
                        }
                    }
                    .bright{
                        width:50%;
                        text-align: right;
                        text-overflow: ellipsis;
                                    overflow: hidden;
                                    white-space: nowrap;
                        font-size:24rpx;
                        color:#333
                        text{
                            ccolor: #999;
                        }

                    }
                }

            }
        }
    }
}
</style>
